<template>
  <div class="echarts">
    <div>
      <div>
      <div ref='pie' class="pieStyle"></div>
      </div>

    </div>
    <div ref='bar' class="bar"></div>
  </div>
</template>

<script>
import { getPieOption, setEchart, getBarOption } from '@/utils/echart_config.js'

export default {
  mounted() {
    this.drawPie()
    this.drawBar()
  },
  methods: {
    drawPie() {
      var pieData = [
        {
          name: 'LOL',
          value: '60'
        },
        {
          name: '吃鸡',
          value: '40'
        }
      ]
      const option = getPieOption(pieData, 'Jayce统计饼图')
      setEchart(this.$refs.pie, option)
    },
    drawBar() {
      var pieData = {
        data: [200000, 500000, 600000, 800000, 1000000],
        yData: ['应用5', '应用4', '应用3', '应用2', '应用1']
      }

      const option = getBarOption(pieData, 'Jayce统计柱形图')
      setEchart(this.$refs.bar, option)
    }
  }
}
</script>

<style lang="less" scoped>
.echarts{
}
.pieStyle{
  border: 1px solid red;
  min-width:300px;
  min-height: 300px;
  margin-right: 20px;
}
.bar{
  border: 1px solid palegreen;
  width: 500px;
  height: 500px;;
}
</style>
